<script>
import messageItem from "./messageItem.vue";
export default {
  props: {
    childData: {
      type: Array,
      default: {},
    },
    userId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      lang: uni.getStorageSync("lang"),
    };
  },
  components: {
    messageItem,
  },
  methods: {
    openModal() {
      this.$emit("openModal");
    },
    previewVideo(url) {
      this.$emit("previewVideo", url);
    },
    previewImage(url, arr) {
      console.log(url);
      console.log(arr);

      uni.previewImage({
        urls: arr.map((item) => item.path),
        current: url,
      });
    },
    downloadFile(url) {
      console.log(url, "urlurlurlurl");
      this.isMessageGo({
        action: "downloadFile",
        data: {
          url: this.getImageUrl(url),
        },
      });

      // window.open(url, '_blank')
    },
  },
};
</script>
<template>
  <div>
    <div
      class="flex items-start w-full mb-30 rounded-18"
      v-for="(item, index) in childData"
      style="border: 1px solid #ddd"
    >
      <div class="flex-col flex-1">
        <div class="between p-20" style="align-items: flex-start">
          <div>
            <div
              class="fz26"
              style="line-height: 40rpx; word-break: break-word"
            >
              {{ lang == "zh" ? item.remark.remark : item.remark.remark_ru }}
            </div>
            <div class="fz22 mt-8 text-gray-500">{{ item.create_at }}</div>
          </div>
          <div class="fz24 text-gray-500 flex-shrink-0 ml-20">
            #{{ index + 1 }}
          </div>
        </div>
        <p class="fz24 text-010 ml-15">
          {{ item.user_id == userId ? $t("(货主评论)") : "" }}
        </p>
        <div class="media-list flex flex-wrap flex-shrink-0 px-20">
          <div
            @click="previewVideo(item.path)"
            style="width: 30%"
            class="h-140 relative flex-shrink-0 bg-gray-400"
            v-for="item in item.video"
          >
            <image
              src="/static/icon/play.png"
              class="w-40 h-40 absolute"
              style="left: 50%; top: 50%; transform: translate(-50%, -50%)"
              mode="aspectFill"
            >
            </image>
          </div>
          <image
            :src="image.path"
            @click="previewImage(image.path, item.image)"
            style="width: 30%"
            v-for="image in item.image"
            class="h-140 flex"
            mode="aspectFill"
          >
          </image>
        </div>
        <div class="files w-full px-20" style="width: 480rpx">
          <div
            class="item py-16 px-24 between rounded-18 mb-16"
            v-for="item in item.attachment"
          >
            <div class="flex text-1d1d1d fz24" style="width: 90%">
              <u-icon
                name="file-text"
                size="40rpx"
                class="mr-8"
                color="#278AFF"
              ></u-icon>
              <div class="pb-3" style="word-break: break-all">
                {{ item.path.split("/").pop() }}
              </div>
            </div>
            <div @click="downloadFile(item.path)">
              <image
                src="/static/icon/download.png"
                mode="widthFix"
                class="w-30"
              ></image>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.files {
  .item {
    background-color: #f7f7f7;
  }
}

.media-list {
  margin-top: 24rpx;
  margin-bottom: 24rpx;
  gap: 20rpx;
}

.reply {
  background-color: #f5f5f5;
  padding: 20rpx;
  border-radius: 20rpx;
}

.absolute {
  position: absolute;
}

.del {
  right: 0rpx;
  top: 0rpx;
  transform: translate(30%, -30%);
}

.relative {
  position: relative;
}

.z-10 {
  z-index: 10;
}

.left-0 {
  left: 0;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.items-start {
  align-items: stretch;
}

.flex-wrap {
  flex-wrap: wrap;
}

.bottom-0 {
  bottom: 0;
}

.flex-shrink-0 {
  flex-shrink: 0;
}
</style>
